<!-- 钉钉导航测试 -->
<template>
  <div>
    <van-nav-bar title="新页面" left-arrow @click-left="onClickLeft" v-if="!$isDD" />
    <div class="content">
      <div>
        {{ $isDD ? '这里是钉钉' : '这里不是钉钉' }}
      </div>
      <div>
        {{ msg }}
      </div>

      <div v-for="d in data" :key="d">
        {{ `第${d}层` }}
      </div>

      <div>{{ userinfo.name }}</div>
      <button class="btn" @click="btnclick">+1</button>
      <div>
        <van-button @click="handleClose">关闭当前页面</van-button>
      </div>
    </div>
  </div>
</template>

<script>
const u = navigator.userAgent
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // 判断是否是 android终端

export default {
  data() {
    return {
      msg: '',
      data: [],
      userinfo: this.$store.getters.userInfo
    }
  },

  computed: {},

  mounted() {
    this.data.push(1)
    if (this.$isDD) {
      this.$dd.ready(() => {
        this.$dd.biz.navigation.setTitle({
          title: '新页面'
        })

        if (isAndroid) {
          document.addEventListener('backbutton', e => {
            // 安卓调用方式
            // e.preventDefault() // 阻止返回
            // 在这里处理你的业务
            this.dataCtl()
          })
        } else {
          this.$dd.biz.navigation.setLeft({
            control: true,
            text: '',
            onSuccess: result => {
              // IOS调用方法 ios返回不起作用，需要手动让他返回window.history.go(-1)
              this.dataCtl()
            },
            onFail(err) {
              console.log('返回失败', err)
            }
          })
        }
      })
    }
  },

  methods: {
    btnclick() {
      this.data.push(this.data.length + 1)
    },
    onClickLeft() {
      this.dataCtl()
    },
    dataCtl(cb) {
      if (this.data.length > 0) {
        this.data.pop()
        this.msg = `还有${this.data.length}层数据！`
      } else {
        // 当前页面返回方式
        // isAndroid || !this.$isDD ? this.$router.go(-1) : window.history.go(-1)
        // 打开新的页面关闭方式
        this.handleClose()
      }
    },
    handleClose() {
      this.$dd.ready(() => {
        this.$dd.biz.navigation.close({})
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  div {
    font-size: 20px;
    padding: 10px;
  }
  .btn {
    padding: 10px 30px;
    font-size: 20px;
    color: #000;
  }
}
</style>
